<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>"鸡兔同笼"问题</title>
    <link rel="stylesheet" href="../css/css05.css">
</head>
<body>
    <div class="container" >
        <h2>循环解决鸡兔同笼问题</h2>
        <p>
            鸡兔同笼，鸡兔一共<input type="number">只。笼子里脚一共<input type="number">只，请问分别有多少只鸡和兔？<button>计算</button>
        </p>
        <div id="result" ></div>
    </div>

    <script>
        var input=document.querySelectorAll('input')
        var button=document.querySelector('button')
        var result=document.querySelector('#result')
        button.onclick=function(){
            result.style.cssText='color:red,;'
            all='无解'
            for(i=0;i<=input[0].value && 4*i<=input[1].value;i++){
                if(4*i+2*(input[0].value-i)==input[1].value){
                    var j=input[0].value-i;
                    result.style.cssText='color:blue;'
                    all='分别有鸡:'+j+'只，有兔子'+i+'只';
                }
            }
            result.innerHTML=all
        }
    </script>
</body>
</html>